<template>
  <el-drawer
    v-model="show"
    direction="rtl"
    :append-to-body="true"
    size="43%"
    :before-close="before_close"
  >
    <template #title>
      <div class="userinfo">
        <h1>{{ userinfo }}</h1>
        <h3>{{ user_email }}</h3>
      </div>
    </template>
    <template #default>
      <div class="t_defalut">
        <ul v-infinite-scroll="load" class="infinite-list">
          <li
            v-for="(item, i) in file_list"
            :key="i"
            class="infinite-list-item"
            @click="show_file_content(item)"
          >
            <h1>{{ i + 1 }}</h1>
            <h1>{{ item.uptime }}</h1>
            {{ item.filename }}
            <h1>处理:{{ item.Processed }}</h1>
          </li>
        </ul>
        <p
          :v-if="have_more"
          style="
            align-self: center;
            font-size: 15px;
            color: rgba(100, 100, 100, 0.5);
            margin: 15px;
          "
        >
          ---没有更多了---
        </p>
      </div>
    </template>
    <template #footer>
      <div class="upfile">
        <el-button
          class="precess_button"
          type="primary"
          :loading="process_loading"
          @click="process_all()"
          >处理未处理文件</el-button
        >
        <el-upload
          class="upload-class"
          drag
          action="api/UpFile/"
          accept=".pdf,.txt,.json"
          :on-success="up_success"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖动或者<em>点击上传</em>文件<br /><br />
            txt/pdf/数据集
          </div>
        </el-upload>
      </div>
    </template>
  </el-drawer>
  <PdfView ref="pdfview"></PdfView>
</template>

<script>
import { reactive, ref } from "vue";
import PdfView from "@/components/main/PdfView.vue";
export default {
  name: "slider",
  props: {
    slider_processed_handler: {
      type: Function,
      default: null,
    },
  },
  components: {
    PdfView,
  },
  // props:["user_info"],
  data() {
    return {
      show: false,
      userinfo: "----",
      user_email: "---",
      process_loading: false,
      is_loading: false,
      have_more: ref(true),
      file_list: reactive([]),
      file_pages: ref(1),
      interval: null,
    };
  },
  mounted() {
    let user_info = this.$store.getters.getuser_info;
    this.process_loading = this.$store.getters.getPrecessFileLoading;
    if (user_info != null) {
      this.userinfo = user_info.username + "(" + user_info.role + ")";
      this.user_email = user_info.email;
    }
  },
  watch: {
    process_loading() {
      // this.$store.commit("setfiles", [[], 1]);
      this.setfiles(1, []);
      this.have_more = true;
      this.load();
    },
  },
  beforeUnmount() {
    this.$store.commit("setProcessFileLoading", this.process_loading);
    // this.$store.commit("setfiles", [this.file_list, this.file_pages]);
  },
  methods: {
    up_success: function () {
      this.have_more = true;
      this.load();
    },

    setfiles: function (file_page, file_list) {
      this.file_pages = file_page;
      if (file_page == 1) {
        this.file_list = file_list;
      } else {
        this.file_list = this.file_list.concat(file_list);
      }
    },
    show_file_content(item) {
      this.$refs.pdfview.show_file(item, true);
      console.log(item);
    },
    process_all_fun: function () {
      this.$axios.get("/api/flush_process").then((res) => {
        if (!res.data.processing) {
          if (res.data.success) {
            this.$notify.success({
              title: "文件消息",
              message: "处理完成,请重载图谱！！"
            });
            this.process_loading = false;
            this.slider_processed_handler();
          } else {
            this.$notify.error({
              title: "文件消息",
              message: res.data.msg
            });
            this.process_loading = false;
          }
          this.interval && clearInterval(this.interval);
        }
      });
    },
    process_all: function () {
      this.process_loading = true;
      this.interval && clearInterval(this.interval);
      this.process_all_fun();
      this.interval = setInterval(() => {
        this.process_all_fun();
      }, 10000);
    },
    before_close: function (done) {
      this.show = false;
    },
    show_self() {
      this.show = true;
    },
    load() {
      if (this.is_loading || !this.have_more) {
        return;
      }
      this.is_loading = true;
      this.$axios
        .get("/api/files", { params: { page: this.file_pages } })
        .then((res) => {
          console.log("slider files",res);
          if (res.data.success) {
            if (res.data.has_next) {
              this.setfiles(res.data.next_page, res.data.obj_list);
              // this.$store.commit("setfiles", [
              //   res.data.obj_list,
              //   res.data.next_page,
              // ]);
              this.have_more = true;
            } else {
              this.setfiles(this.file_pages, res.data.obj_list);
              this.have_more = false;
            }
          } else {
            this.$notify.warning({
              title: "文件消息:",
              message: "加载文件失败;" + res.data.msg,
            });
          }
          this.is_loading = false;
        });
    },
  },
};
</script>
<style scoped>
.t_defalut {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-self: center;
  align-items: center;
}
.infinite-list {
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  box-sizing: border-box;
  width: 95%;
  list-style: none;
}
.infinite-list .infinite-list-item {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  height: 47px;
  background: rgb(236, 236, 236);
  border: 1px solid white;
  border-radius: 17px;
  color: rgb(70, 70, 70);
  padding-left: 25px;
  padding-right: 25px;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.infinite-list :hover {
  background: #9fe08088;
}
.infinite-list :active {
  background: #c6e8a839;
}
.upfile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 0 15px;
}
.precess_button {
  width: 65%;
  margin: 15px;
}
.userinfo {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-left: 10px;
}
.userinfo h1 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bolder;
  color: rgb(61, 61, 61);
}
.userinfo h3 {
  font-size: 10px;
  font-weight: bolder;
}
</style>
